<template>
  <base-content>
    <BCRUD
      entity="Group"
      :populate="['members']"
      :form="form"
      :columns="columns"
      :isGrid="false"
    ></BCRUD>
  </base-content>
</template>

<script>
import { toArrayEnum } from "src/utils/enum";
import BCRUD from "components/BCRUD.vue";

export default {
  components: { BCRUD },
  data() {
    return {
      form: {
        // avatar: {
        //   is: "form-image",
        //   size: "100px",
        //   changeable: true
        // },
        id: {
          is: "q-input",
          label: "ID",
          readonly: true,
          whenShow: "upt"
        },
        name: {
          is: "q-input",
          type: "text"
        },
        uniqueCode: {
          is: "q-input",
          type: "text"
        },
        tags: {
          is: "form-chips"
        },
        creator: {
          is: "q-input",
          type: "text"
        },
        cate: {
          is: "q-select",
          emitValue: true,
          mapOptions: true,
          default: 0,
          options: toArrayEnum([
            "未分类",
            "教育",
            "互联网",
            "金融",
            "能源",
            "建筑",
            "服务",
            "医疗",
            "文娱",
            "零售",
            "交通运输",
            "房地产"
          ])
        },
        status: {
          label: "用户状态",
          is: "q-select",
          emitValue: true,
          mapOptions: true,
          default: 0,
          options: [
            {
              label: "正常",
              value: 0
            },
            {
              label: "禁用",
              value: 1
            }
          ]
        },
        createdAt: {
          is: "q-input",
          type: "text",
          readonly: true
        },
        updatedAt: {
          is: "q-input",
          type: "text",
          readonly: true
        },
        deletedAt: {
          is: "q-input",
          type: "text",
          label: "删除时间",
          readonly: true
        }
        // roles: {
        //   is: "form-roles"
        // },
        // setting: {
        //   is: "form-setting"
        // }
      },
      columns: [
        {
          name: "id",
          required: true,
          label: "ID",
          field: row => row.id,
          format: val => `${val}`,
          sortable: true,
          searchModify: "@="
        },
        {
          name: "name",
          required: true,
          label: "名称",
          field: row => row.name,
          format: val => `${val}`,
          sortable: true,
          searchModify: "@like"
        },
        {
          name: "uniqueCode",
          required: true,
          label: "群号",
          field: row => row.uniqueCode,
          format: val => `${val}`,
          sortable: true,
          searchModify: "@="
        },
        {
          name: "tags",
          is: "cell-chips",
          required: true,
          label: "标签",
          field: row => row.tags,
          // format: val => `${val}`,
          sortable: true,
          searchModify: "@in"
        },
        {
          name: "cate",
          required: true,
          label: "类型",
          field: row => row.cate,
          format: val =>
            `${
              [
                "未分类",
                "教育",
                "互联网",
                "金融",
                "能源",
                "建筑",
                "服务",
                "医疗",
                "文娱",
                "零售",
                "交通运输",
                "房地产"
              ][val]
            }`,
          sortable: true
        },
        {
          name: "creator",
          required: true,
          label: "创建者",
          field: row => row.creator.id || row.creator,
          format: val => `${val}`,
          sortable: true,
          is: "cell-link",
          bindProps() {
            return {
              href: id => `/user/account?where=id:${id}`
            };
          }
        },
        {
          name: "status",
          required: true,
          label: "状态",
          field: row => row.status,
          format: val => `${["正常", "禁用"][val]}`,
          sortable: true
        },
        {
          name: "members",
          required: true,
          label: "所有人数",
          field: row => row.members.length,
          format: val => `${val}`
        },
        {
          name: "memberTotal",
          required: true,
          label: "已加入",
          field: row => row.memberTotal,
          format: val => `${val}`
        },
        {
          name: "createdAt",
          required: true,
          label: "创建时间",
          field: row => row.createdAt,
          format: val => `${val}`
        },
        {
          name: "updatedAt",
          required: true,
          label: "更新时间",
          field: row => row.updatedAt,
          format: val => `${val}`
        }
      ]
    };
  }
};
</script>

<style></style>
